<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 2.5x 结合restful api后端，CRUD演示</title>
    <!-- Vue 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入饿了么样式和组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios ajax请求库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="add">添加</el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="用户ID" :width="tableColumnWidth"></el-table-column>
        <el-table-column prop="username" label="用户名" :width="tableColumnWidth"></el-table-column>
        <el-table-column prop="age" label="年龄" :width="tableColumnWidth"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column fixed="right" label="操作" :width="tableColumnWidth">
            <template slot-scope="scope">
                <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
                <!--<el-button @click="update(scope.row)" type="text" size="small">编 辑</el-button>-->
                <!--<el-button @click="deleteUser(scope.row)" type="text" size="small">删 除</el-button>-->
                <el-button @click="deleteUser(scope.row)" type="danger" icon="el-icon-delete" size="small" circle></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 编辑用户信息 -->
    <el-dialog title="用户详情" :visible.sync="updateUserDetailVisible">
        <el-form :model="userData">
            <el-input type="hidden" v-model="userData.id" auto-complete="off"></el-input>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="userData.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="userData.age" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="userData.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="爱好" :label-width="formLabelWidth">
                <el-input v-model="userData.likes" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelUpdate">取 消</el-button>
            <el-button type="primary" @click="submitUpdate">提 交</el-button>
        </div>
    </el-dialog>


    <!-- 添加用户信息 -->
    <el-dialog title="用户详情" :visible.sync="addUserDetailVisible">
        <el-form :model="userData">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="userData.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="userData.age" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="userData.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="爱好" :label-width="formLabelWidth">
                <el-input v-model="userData.likes" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addUserDetailVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmit">提 交</el-button>
        </div>
    </el-dialog>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            tableData: [],
            userDetailVisible: false,
            userDetailData: [],
            updateUserDetailVisible: false,
            addUserDetailVisible: false,
            userData: {},
            tableColumnWidth: '180',
            formLabelWidth: '80px'
        },
        created: function () {
            this.getAll();
        },
        methods: {
            getAll: function () {
                axios.get("http://localhost:9090/userAll")
                    .then(function (response) {
                        vm.tableData = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error.config);
                    });
            },
            getUserDetail: function (id, callback) {
                var user = null;
                axios.get("http://localhost:9090/user/" + id)
                    .then(function (response) {
                        user = response.data;
                        callback(user);
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                return user;
            },
            //修改用户资料
            update: function (row) {
                this.getUserDetail(row.id, function (user) {
                    console.log(user);
                    vm.userData = user;
                    //如果爱好不为空
                    if (user.likes != null) {
                        //将数组转化成字符串
                        user.likes = user.likes.join(",");
                    }
                    //显示dialog
                    vm.updateUserDetailVisible = true;
                });
            },
            //取消修改
            cancelUpdate: function () {
                this.updateUserDetailVisible = false;
                this.userData = {};
            },
            //提交修改
            submitUpdate: function () {
                var user = this.userData;
                this.userData = {};
                this.updateUserDetailVisible = false;
                //把字符串爱好转化为数组
                if (user.likes != null) {
                    user.likes = user.likes.split(",");
                }
                axios.put("http://localhost:9090/user", user).then(function (responese) {
                    console.log(responese.data);
                    vm.$message({
                        showClose: true,
                        message: "保存成功!",
                        type: "success"
                    });
                    vm.getAll();
                }).catch(function (error) {
                    vm.$message({
                        showClose: true,
                        message: "保存失败! code:"+error.status+"，msg:"+error.message,
                        type: "error"
                    });
                    console.log(error.config);
                })
            },
            //删除信息
            deleteUser: function (row) {
                axios.delete("http://localhost:9090/user/" + row.id).then(function (responese) {
                    console.log(responese.data);
                    vm.$message({
                        showClose: true,
                        message: "删除成功!",
                        type: "success"
                    });
                    vm.getAll();
                }).catch(function (error) {
                    vm.$message({
                        showClose: true,
                        message: "删除失败! code:"+error.status+"，msg:"+error.message,
                        type: "error"
                    });
                    console.log(error.config);
                })
            },
            //添加信息
            add: function () {
                this.userData = {};
                this.addUserDetailVisible = true;
            },
            addSubmit: function () {
                var user = this.userData;
                this.addUserDetailVisible = false;
                this.userData = {};
                if (user.likes != null) {
                    user.likes = user.likes.split(",");
                }
                axios.post("http://localhost:9090/user", user).then(function (responese) {
                    console.log(responese.data);
                    vm.$message({
                        showClose: true,
                        message: "添加成功!",
                        type: "success"
                    });
                    vm.getAll();
                }).catch(function (error) {
                    vm.$message({
                        showClose: true,
                        message: "添加失败! code:"+error.status+"，msg:"+error.message,
                        type: "error"
                    });
                    console.log(error.config);
                });
            }
        }
    });

</script>

<style>
    #app {
    }
</style>
</body>
</html>